<script setup>
import { getSummaryApi } from '@/apis/user'
import { showToast } from 'vant';
import { ref } from 'vue';
const props = defineProps({
    overview_id: Number
})

// console.log(props.overview_id);

let summaryInfo = ref({})

// 获取小结
const getSummary = async () => {
    const res = await getSummaryApi(props.overview_id)
    // console.log(res)
    if (res.data.code === 200) {
        summaryInfo.value = res.data.data.info
    }
    else {
        showToast(res.data.msg)
    }
}

getSummary()

</script>
<template>
    <div class="summarybox clmstart">
        <p class="ptitle">小结</p>
        <div class="summarytext text1">
            <p v-html="summaryInfo.new_la_summary"></p>
        </div>
        <p class="ptitle">重要改进建议</p>
        <div class="summarytext text2">
            <p v-for="(item, index) in summaryInfo.new_suggestion" :key="index">{{ index + 1 }}. {{ item }}</p>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.summarybox {
    position: relative;
    width: 575px;
    height: 490px;
    text-align: left;
    align-items: flex-start;
    font-size: 1.78rem;
    .ptitle {
        margin-top: 33px;
        font-weight: 500;
        color: #000000;
        border-bottom: 11px solid #37A5F3;
        line-height: 10px;
    }
    .summarytext {
        width: 100%;
        overflow-y: scroll;
        margin-top: 12px;
        background: rgba($color: #000000, $alpha: 0.05);
        border-radius: 10px;
        color: #000000;
        padding: 20px;
    }
    .text1 {
        height: 113px;
        line-height: 1.5;
    }
    .text2 {
        height: 255px;
        line-height: 1.5;
        p {
            padding-bottom: 10px;
        }
    }
}
</style>